<template>
  <div class="app-container">
    <div v-show="!modifyInfo.visible">
      <!-- 条件栏 -->
      <page-filter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.list"
      />
      <!-- 表格 -->
      <table-container
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="getMessageTemplatePage"
        :query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :handle="tableInfo.handle"
        :checkBox="false"
      >
      </table-container>
    </div>

    <!-- 新增或修改 -->
    <message-template-modify
      v-if="modifyInfo.visible"
      v-model:visible="modifyInfo.visible"
      :title="modifyInfo.title"
      :modifyType="modifyInfo.type"
      :modifyData="modifyInfo.data"
      @returnModify="returnModify"
    />
  </div>
</template>

<script setup name="messageTemplate">
import {
  getMessageTemplatePage,
  delMessageTemplatePage,
  enableMessageTemplate,
  disableMessageTemplate
} from '@/api/message.js'
import MessageTemplateModify from './modify'
const { proxy } = getCurrentInstance()
const listTypeInfo = ref({
  depotList: [],
})
// 过滤相关配置
const filterInfo = ref({
  query: {
    sort: 'create_time desc',
    nameLike: '',
  },
  list: [
    { type: 'button', label: '新增', show: true, event: create },
    {
      type: 'input',
      label: '名称',
      value: 'nameLike',
      event: search,
    },
    { type: 'button', label: '搜索', event: search },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  data: [],
  fieldList: [
    { label: '名称', value: 'name' },
    { label: '编码', value: 'code' },
    { label: '模板类型', value: 'typeName' },
    { label: '消息等级', value: 'levelName' },
    { label: '提示方式', value: 'reminderTypeValue' },
    { label: '消息接收端', value: 'messageReceiversTypeValue' },
    { label: '状态', value: 'statusValue' },
    { label: '标题', value: 'title' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '90',
    btList: [
      { label: '修改', event: update, show: true },
      {
        label: proxy.$t('enabled'),
        event: enabled,
        show: true,
        ifRender(row) {
          return row.status === 0
        },
      },
      {
        label: proxy.$t('disabled'),
        event: disabled,
        show: true,
        ifRender(row) {
          return row.status === 1
        },
      },
      { label: '删除', event: deleteObj, show: true },
    ],
  },
})
//新增或更新相关
const modifyInfo = ref({
  visible: false,
  title: '',
  type: 'create',
})
// 表单相关
const formInfo = ref({
  ref: null,
  data: {},
  fieldList: [
    { label: '名称', value: 'name', type: 'input', required: true },
    { label: '编码', value: 'code', type: 'input', required: true },
    { label: '标题', value: 'title', type: 'input' },
    {
      label: '模板类型',
      value: 'type',
      type: 'select-model',
      required: true,
      code: 'message_notification_type',
    },
    {
      label: '接收方类型',
      value: 'receiveType',
      type: 'select-model',
      required: true,
      code: 'message_recipient_type',
    },
    { label: '接收方', value: 'receiveIds', type: 'slot' },
  ],
  rules: {},
  labelWidth: '100px',
})
const typeOptions = ref([])
const valueOptions = ref([])

onMounted(() => {
  proxy.$nextTick(() => {
    getList()
    initRules()
  })
})
function returnModify() {
  search()
}
// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}
function getIds(row) {
  if (row) {
    return [row.id]
  } else {
    // return tableInfo.value.selections.map((value) => value.id)
  }
}
function enabled(row) {
  const ids = getIds(row)
  enableMessageTemplate(ids).then((resp) => {
    if (resp && resp.success) {
      getList()
    }
  })
}
function disabled(row) {
  const ids = getIds(row)
  disableMessageTemplate(ids).then((resp) => {
    if (resp && resp.success) {
      getList()
    }
  })
}
// 初始化验证
function initRules() {
  const _formInfo = formInfo.value
  _formInfo.rules = proxy.$initRules(_formInfo.fieldList)
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
// 创建
function create() {
  modifyInfo.value.visible = true
  modifyInfo.value.title = '新增通知模板'
  modifyInfo.value.type = 'create'
  modifyInfo.value.data = {}
}
// 编辑
function update(data) {
  modifyInfo.value.visible = true
  modifyInfo.value.title = '修改通知模板'
  modifyInfo.value.type = 'update'
  // 显示信息
  modifyInfo.value.data = { ...data }
}
// 删除
function deleteObj(data) {
  proxy
    .$confirm('此操作将删除该模板, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      delMessageTemplatePage(data.id).then((res) => {
        if (res.success) {
          search()
        } else {
          proxy.$message({
            type: 'error',
            message: '删除失败!',
          })
        }
      })
    })
    .catch(() => {
      proxy.$message({
        type: 'info',
        message: '已取消删除',
      })
    })
}
</script>

<style scoped></style>
